<template>
	<view>
		<view v-if="show" class="content-box">
			<view class="content">
				<view class="top-box">
					<image src="../../static/image/close.png" @click="show=false"></image>
				</view>
				<view class="jkxx-box">
					<text>捐款人姓名:</text>
					 <input v-model="model.username" class="input" placeholder="请输入捐款人姓名~"/>
				</view>
				<view class="jkxx-box">
					<text>联系电话:</text>
					<input v-model="model.mobile" type="number" class="input" placeholder="请输入联系电话~"/>
				</view>
				<button class="confirm" @click="confirm">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { fromUser } from '@/api/wish/index'
	export default {
		data(){
			return {
				model: {
					id: undefined,
					username: undefined,
					mobile: undefined
				},
				show: false,
			}
		},
		methods: {
			visible(id) {
				this.model.id = id;
				this.show = true;
			},
			
			confirm() {
				if (!this.model.username) {
					this.$api.msg('捐款人姓名不能为空');
					return;
				}
				if (!this.model.mobile) {
					this.$api.msg('联系电话不能为空');
					return;
				}
				if (!this.model.mobile.length != 11) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				fromUser(this.model, response => {
					this.$emit('confirm');
					this.show = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		position: fixed;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 20;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		width: 690rpx;
		padding: 35rpx 40rpx 50rpx;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 16rpx;
	}
	
	.top-box {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 30rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	
	.jkxx-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		text {
			width: 200rpx;
			font-size: 30rpx;
			color: #000000;
			line-height: 75rpx;
			font-weight: bold;
		}
		.input {
			border: 1rpx solid #C1C1C1;
			box-sizing: border-box;
			flex: 1;
			height: 75rpx;
			border-radius: 10rpx;
			padding: 0 25rpx;
			font-size: 26rpx;
			color: #000000;
		}
	}
	
	.confirm {
		margin-top: 40rpx;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-image: linear-gradient(to right, #4F7AF7, #255CAC);
		color: #fff;
		font-size: 36rpx;
		border-radius: 90rpx;
	}
</style>